<script lang="ts" setup>
import {useRouter} from 'vue-router'
import {type ResMenuList} from '@/api/interface'
import BaseIcon from '@/components/BaseIcon/index.vue'

defineProps<{ menuList: ResMenuList[] }>()
const router = useRouter()

const handleClickMenu = (subItem: ResMenuList) => {
	if (subItem.meta?.link) return window.open(subItem.meta?.link, '_blank')
	router.push({path: subItem.path})
}
</script>

<template>
	<template v-for="subItem in menuList" :key="subItem.path">
		<el-sub-menu v-if="subItem.children && subItem.children.length > 1" :index="subItem.path">
			<template #title>
				<BaseIcon :icon="subItem.meta?.icon || ''" :size="18"/>
				<span>{{ subItem.meta?.title }}</span>
			</template>
			<SubMenu :menu-list="subItem.children"/>
		</el-sub-menu>
		<template v-else-if="subItem.children">
			<SubMenu :menu-list="subItem.children"/>
		</template>
		<el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
			<BaseIcon :icon="subItem.meta?.icon || ''" :size="18"/>
			<template #title>
				<span>{{ subItem.meta?.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<style lang="scss" scoped>

</style>
